<template>
    <div class="loadingPage">
        <div class="loadingPageWrapper">
            <div class="loadingPageContainer">
                <div class="loadingPageCloseButtonContainer sa0PositionAbsolute sa0Button sa0RoundPill sa0Border sa0ZIndex100"
                     @click="handleLoadingPageCloseButtonClick()">{{loadingPageInfo.closeText}}
                </div>
                <div class="loadingPageContentContainer sa0ElementCenter">{{loadingPageInfo.content}}</div>
                <div class="loadingPageFooterContainer sa0TextLeft sa0PositionAbsolute">
                    <div>{{loadingPageInfo.power}} {{loadingPageInfo.version}} x {{loadingPageInfo.author}}</div>
                    <div>{{loadingPageInfo.title}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /***
     * @author: sa0ChunLuyu
     * @time: 2019/11/1 8:52 上午
     */
    export default {
        name: "loadingPage",
        components: {},
        props: ['handleLoadingPageCloseButtonClick'],
        data: () => ({}),
        computed: {
            loadingPageInfo() {
                return this.$store.state.pageData.loadingPage;
            }
        },
        watch: {},
        methods: {},
        mounted() {
        }
    }
</script>

<style scoped>
    * {
        /*background: rgba(168, 127, 100, 0.28);*/
    }

    .loadingPage {
        font-size: .35rem;
    }

    .loadingPageCloseButtonContainer {
        left: .35rem;
        top: .35rem;
        font-size: .25rem;
        padding: .06rem 0.2rem;
        border-color: rgba(0, 0, 0, .5);
        color: rgba(0, 0, 0, .5);
    }

    .loadingPageFooterContainer {
        left: .35rem;
        bottom: .35rem;
        font-size: .2rem;
        color: rgba(0, 0, 0, .5);
    }
</style>